<template>
    <h1>Vue 路由测试</h1>
    <div class="container">
        <div class="nav">
            <RouterLink to="/" active-class="active">首页</RouterLink> 
            <RouterLink to="/news" active-class="active">新闻</RouterLink>
            <RouterLink to="/about" active-class="active">关于</RouterLink>
        </div>
        <RouterView></RouterView>
    </div>
</template>

<script setup lang="ts">
import { RouterLink ,RouterView} from 'vue-router';

</script>

<style scoped>
    .container{
        width: 100%;
        height: 600px;
        background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
        border-radius: 20px;
        box-shadow: 0 0 10px;
    }
    .nav{
        height: 70px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .nav a {
        height: 50px;
        padding: 0 30px;
        line-height: 50px;
        letter-spacing: 5px;
        font-weight: bold;
        display: block;
        color: #fff1eb;
        text-align: center;
        background-color: rgb(129, 129, 129);
        text-decoration: none;
        border-radius: 10px;
    }
    .nav a.active{
        background-color: #77927e;
        color: #d4ac63;
    }
</style>